<script setup>
import { ref } from 'vue'
import $router from '@/router'
import HeadLine from './HeadLine.vue'
const services = ref([
  {
    icon: '/icons/找贷款.svg',
    title: '找贷款',
    path: '/jrcp',
    bg: '#7dcee6',
    to: '#eaf2fd',
    query: { ptype: '贷款' }
  },
  {
    icon: '/icons/找担保.svg',
    bg: '#6d90e6',
    title: '找担保',
    path: '/jrcp',
    query: { ptype: '担保' }
  },
  {
    icon: '/icons/找保险.svg',
    bg: '#8b7fd6',
    to: '#eaf2fd',
    title: '找保险',
    path: '/jrcp',
    query: { ptype: '保险' }
  },
  {
    icon: '/icons/找投资.svg',
    bg: '#f1ba4f',
    title: '找投资',
    path: '/tzjg',
    query: { ptype: '投资' }
  },
  { icon: '/icons/云秒贴.svg', bg: '#6d90e6', title: '找资产', path: '', query: {} }
])
function command(item) {
  $router.push(item)
}
</script>
<template>
  <div class="container mx-auto py-5 flex flex-column h-96">
    <HeadLine :title="'服务直达'" />
    <div class="w-full flex justify-content-evenly gap-5">
      <div
        class="flex justify-content-between align-content-center gap-2 h-11rem shadow-lg cursor-pointer p-5 border-round-lg"
        v-for="item in services"
        :key="item"
        @click="command(item)"
        :style="{
          'background-color': item.bg,
          background: `linear-gradient(to bottom, ${item.bg}, rgb(224 230 249)) !important`
        }"
      >
        <img class="flex-none h-7rem align-self-start" :src="item.icon" />
        <span class="text-5xl align-self-end text-white">{{ item.title }}</span>
      </div>
    </div>
  </div>
</template>
